<script setup lang="ts">
import { FwbToggle, FwbTooltip } from 'flowbite-vue';
import type { ProfileType } from '~/types/user';

const { showToast } = useToast();
const { getProfileById } = useProfile();
const { signout } = useSign();

const profile = ref<ProfileType>();

const close = ref(false);

const items = [
    { icon: 'icon-chat', text: 'Chat', link: '/home/chat' },
    { icon: 'icon-paint', text: 'Paint', link: '/home/paint' },
];

// 注销登录
const onLogout = async () => {
    const { msg } = await signout();
    showToast({ msg, type: 'success' });
    navigateTo('/login');
};

onMounted(async () => {
    // 显示用户信息
    const { data } = await getProfileById();
    profile.value = data;
});
</script>

<template>
    <nav class="relative p-3 w-1/5 h-full shrink-0 border-r-2 border-slate-100 flex flex-col gap-4 transition-all duration-500"
        :class="{ closed: close }">
        <header class="w-full flex gap-3">
            <c-avatar-img class="h-12 shrink-0 aspect-square rounded" :src="profile?.avatar" />
            <span class="mr-2 text-xl flex-auto flex items-center truncate">{{ profile?.username || 'Username' }}</span>
        </header>
        <div class="flex-auto flex flex-col gap-3">
            <home-nav-item v-for="item in items" :key="item.text" :icon="item.icon" :link="item.link" :hover="true">
                {{ item.text }}
            </home-nav-item>
        </div>
        <footer class="w-full flex flex-col gap-3">
            <fwb-tooltip placement="right" trigger="click">
                <template #trigger>
                    <home-nav-item icon="icon-exit" :hover="true">Exit</home-nav-item>
                </template>
                <template #content>
                    <div class="p-2 m-0.5 drop-shadow-md text-slate-500 bg-white font-mono rounded flex flex-col gap-2">
                        <div>Are you sure to logout?</div>
                        <div class="flex justify-around">
                            <button
                                class="w-20 h-6 bg-element text-sm text-white rounded-full shadow hover:bg-theme active:shadow-inner"
                                @click="onLogout">
                                Confirm
                            </button>
                        </div>
                    </div>
                </template>
            </fwb-tooltip>
            <home-nav-item icon="icon-sun">
                Daytime<fwb-toggle class="ml-auto" />
            </home-nav-item>
        </footer>
        <div class="absolute z-10 top-1/2 left-full w-6 aspect-square bg-element rounded-full shadow flex justify-center items-center
         translate-x-to-center translate-y-to-center" @click="close = !close">
            <svg class="icon transition-all duration-200" :class="{ 'rotate-180': close }"
                :style="{ width: '80%', height: '80%' }" aria-hidden="true">
                <use xlink:href="#icon-arrow-left-white" />
            </svg>
        </div>
    </nav>
</template>

<style lang="scss" scoped>
nav.closed {
    width: 4.75rem;
}
</style>

<style lang="scss">
div.v-popper {
    flex: 1 1 auto;
    overflow: hidden;
}
</style>